<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-22 12:49
  *@LastEditTime 2020-03-22 12:49
  *@LastEdititors
-->
<template>
    <div id="shop">
      <div class="top">
        <div class="order">
          <i class="cubeic-calendar"></i>
        </div>
        <div class="sousuo" @click="toNewPage('/search')">
          <i class="cubeic-search"></i>
          <span>搜索商品</span>
        </div>
        <div class="car">
          <i class="cubeic-mall"></i>
        </div>
      </div>
      <!--头区域：订单，搜索,购物车区域-->
      <div :style="{height:$inerHeight + 10 + 'px'}">
        <cube-scroll :data="[1,2,3]">
          <!--分类区域-->
          <div class="sort">
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-dongman.png" alt="动漫">
              </div>
              <div class="text">动漫</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-game.png" alt="游戏">
              </div>
              <div class="text">游戏</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-mofashaonv.png" alt="魔法少女">
              </div>
              <div class="text">魔法少女</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-saber.png" alt="fate系列">
              </div>
              <div class="text">fate系列</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-japan.png" alt="日系">
              </div>
              <div class="text">日系</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-shiping.png" alt="fate系列">
              </div>
              <div class="text">饰品</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-yuansu.png" alt="cos元素">
              </div>
              <div class="text">cos元素</div>
            </div>
            <div class="sort-item">
              <div class="icon">
                <img src="../../../static/icon-nav-shop/icon-all.png" alt="全部分类">
              </div>
              <div class="text">全部分类</div>
            </div>
          </div>
          <!--品牌馆,二手铺区域-->
          <div class="pingpai-ershou">
            <div>
              <img src="../../../static/icon-nav-shop/icon_nav_brand.png" alt="品牌馆">
              <span>品牌馆</span>
            </div>
            <div>
              <img src="../../../static/icon-nav-shop/icon_nav_secondhand.png" alt="品牌馆">
              <span>二手铺</span>
            </div>
            <div class="line"></div>
          </div>
          <!--最新区域-->
          <div class="zhuanti">
            <hr>
            <div class="title">最新专题</div>
          </div>
          <!--具体的哪些专题-->
          <template v-for="(data,index) in imgData">
            <zhuan-ti :imgData="data" :key="index"></zhuan-ti>
          </template>
        </cube-scroll>
      </div>
      <bottom :select-index="2"></bottom>
    </div>
</template>

<script>
import bottom from '../../components/Bottom'
import ZhuanTi from '../../components/ZhuanTi'
export default {
  name: 'shop',
  components: {
    bottom,
    ZhuanTi
  },
  data () {
    return {
      imgData: [
        {
          datu: '../../static/icon-zhuanti/1.png',
          product: [
            {
              url: '../../static/icon-zhuanti/12.jpg',
              pid: '1',
              price: '135'
            },
            {
              url: '../../static/icon-zhuanti/13.jpg',
              pid: '1',
              price: '136'
            },
            {
              url: '../../static/icon-zhuanti/14.jpg',
              pid: '1',
              price: '140'
            },
            {
              url: '../../static/icon-zhuanti/15.jpg',
              pid: '1',
              price: '158'
            },
            {
              url: '../../static/icon-zhuanti/16.jpg',
              pid: '1',
              price: '199'
            },
            {
              url: '../../static/icon-zhuanti/17.jpg',
              pid: '1',
              price: '200'
            },
            {
              url: '../../static/icon-zhuanti/18.jpg',
              pid: '1',
              price: '205'
            },
            {
              url: '../../static/icon-zhuanti/19.jpg',
              pid: '1',
              price: '255'
            },
            {
              url: '../../static/icon-zhuanti/20.jpg',
              pid: '1',
              price: '199'
            }
          ]},
        {
          datu: '../../static/icon-zhuanti/2.jpg',
          product: [
            {
              url: '../../static/icon-zhuanti/21.jpg',
              pid: '1',
              price: '135'
            },
            {
              url: '../../static/icon-zhuanti/22.jpg',
              pid: '1',
              price: '136'
            },
            {
              url: '../../static/icon-zhuanti/23.jpg',
              pid: '1',
              price: '140'
            },
            {
              url: '../../static/icon-zhuanti/24.jpg',
              pid: '1',
              price: '158'
            },
            {
              url: '../../static/icon-zhuanti/25.jpg',
              pid: '1',
              price: '199'
            },
            {
              url: '../../static/icon-zhuanti/26.jpg',
              pid: '1',
              price: '200'
            }
          ]}
      ]
    }
  },
  mounted () {
    console.log(1)
    // 让滚动条可以滚动
    // 获取滚动条内容盒子
    let element = document.querySelectorAll('.imgArea .cube-scroll-content')
    for (let content of element) {
      let listItem = content.getElementsByClassName('list-item')
      // 获取一个item的宽度
      let len = listItem.length > 0 ? listItem[0].offsetWidth : 0
      // content的宽度 = （盒子数+1）*一个item的宽度
      content.style.width = (listItem.length + 2) * len + 'px'
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
#shop
{
  .top
  {
    display flex
    flex-flow row nowrap
    justify-content space-between
    align-items center
    line-height:1rem
    padding 2px 5px
    height 10px
    line-height 10px
    border-bottom 1px solid #f0f0f0
    i
    {
      font-size:7px;
    }
    .sousuo
    {
      width 80%
      flex none
      background #f0f0f0
      span
      {
        margin:0px 2px
      }
    }
  }
  .sort
  {
    display flex
    flex-wrap wrap
    justify-content space-around
    border-bottom:1px solid #f0f0f0
    margin 2px 0px
    padding 4px 0px 3px 0px
    .sort-item
    {
      width 21%
      display flex
      height 45px
      flex-flow column nowrap
      justify-content space-between
      color: #999;
      padding 2px
      .icon
      {
        width 100%
        height 30px
        background green
        img
        {
          width 100%
          height: 100%
        }
      }

      .text
      {
        height 10px
        line-height 10px
        padding 2px 0px
      }
    }
  }
  .pingpai-ershou
  {
    display flex
    flex-flow row nowrap
    position relative
    height: 20px
    line-height 20px
    border-bottom 5px solid #f0f0f0
    div
    {
      width 50%
      height 20px
      line-height 20px
      position relative
      img
      {
        width 10px
        height:10px
        position absolute
        top: 50%
        transform translateY(-50%)
        left:18px;
      }
    }
    .line
    {
      width: 1px
      height 10px
      position absolute
      border-right 1px solid #f0f0f0
      left:50%
      top:50%
      transform translateY(-50%)
    }
  }
  .zhuanti
  {
    height 10px
    line-height 10px
    position: relative
    hr
    {
      width: 100%
      height 1.5px
      margin 0px
      position absolute
      top: 50%
      transform translateY(-50%)
      border none
      background-color: #FFFFFF;
      background-image: linear-gradient(90deg, #FFFFFF 0%, #666 50%, #FFFFFF 100%);

    }
    .title
    {
      width 40px
      background white
      color #999
      position: absolute
      top: 50%
      left 50%
      transform translateY(-50%)  translateX(-50%)
    }
  }
}
</style>
